<!-- 模板界面,使用时全局替换
    registration  为此页要维护的信息(例如department)
    registrationData 为此页面要维护的信息的数组(例如deptData) 
    TempMember    为此页面要维护的信息的一个成员(例如deptName之于department),作为示例使用
    -->
<template>
  <div>
    <el-header>
      <el-row :gutter="10">
        <el-col :span="4">挂号界面</el-col>
        <!-- <el-col :span="4">下一个身份证号：</el-col>
        <el-col :span="4">
          <el-input
            placeholder="下一个身份证号"
            v-model="resultInfo.nextPatientId"
            :disabled="true"
            span="4"
          ></el-input>
        </el-col>-->
      </el-row>
    </el-header>
    <!-- 添加和修改 -->
    <el-main>
      <el-form
        :model="registration"
        label-width="100px"
        label-position="left"
        :rules="addRules"
        ref="addForm"
      >
        <el-form-item label="名字" prop="ptName">
          <el-input v-model="registration.ptName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="ptIdNumber">
          <el-input v-model="registration.ptIdNumber"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="ptGender">
          <el-radio v-model="registration.ptGender" label="男">男</el-radio>
          <el-radio v-model="registration.ptGender" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="地址" prop="ptAddress">
          <el-input v-model="registration.ptAddress"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="ptBirthday">
          <el-date-picker
            v-model="registration.ptBirthday"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="挂号级别" prop="registLevel">
          <el-select v-model="registration.registLevel" placeholder="请选择">
            <el-option v-for="item in registLevelArr" :key="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="挂号科室" prop="department">
          <el-select v-model="registration.department" @change="selectDept()" placeholder="请选择">
            <el-option v-for="item in departmentArr" :key="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="挂号医生" prop="doctor">
          <el-select v-model="registration.doctor" placeholder="请选择">
            <el-option v-for="item in doctorArr" :key="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需要病历" prop="needBook">
          <el-radio-group v-model="registration.needBook">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="saveClick('addForm')">挂号</el-button>
      <el-button type="danger" @click="addButtonClicked('addForm')">重置</el-button>
      <el-dialog title="收费" :visible.sync="dialogVisible">
        <span class="dialog-footer">
          <el-table :data="resultInfo" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="idNUmber" label="身份证号"></el-table-column>
            <el-table-column prop="patientId" label="病历号"></el-table-column>
            <el-table-column prop="totalCost" label="总费用"></el-table-column>
            <el-table-column prop="dept" label="挂号部门"></el-table-column>
            <el-table-column prop="level" label="挂号等级"></el-table-column>
            <el-table-column prop="invoiceNumber" label="发票号"></el-table-column>
          </el-table>
          <div style="margin-left: 600px;margin-top: 20px">
            <el-button type="primary" @click="cancel">打印</el-button>
          </div>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import { insert, getData, getDoctor, pay } from "@/api/registration.js";
export default {
  mounted() {
    // 渲染完成
    this.loadData();
  },
  data() {
    let validIdnumber = (rule, value, callback) => {
      if (
        value &&
        (!/\d{17}[\d|x]|\d{15}/.test(value) ||
          (value.length !== 15 && value.length !== 18))
      ) {
        callback(new Error("身份证号码不符合规范"));
      } else {
        callback();
      }
    };
    return {
      addForm: "",
      addRules: {
        ptName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        ptIdNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validIdnumber, trigger: "blur" }
        ],
        ptGender: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        ptAddress: [{ required: true, message: "请输入地址", trigger: "blur" }],
        ptBirthday: [
          { required: true, message: "请选择出生日期", trigger: "change" }
        ],
        registLevel: [
          { required: true, message: "请选择挂号级别", trigger: "change" }
        ],
        department: [
          { required: true, message: "请选择挂号科室", trigger: "change" }
        ],
        needBook: [
          { required: true, message: "请选择是否需要病历本", trigger: "change" }
        ]
      },
      // 复选框
      multipleSelection: [],
      // 分页
      pageSize: 1,
      totalRecord: 3,
      currentPageNum: 0,
      // 对话框
      dialogVisible: false,
      // 局部对象
      // 存储路径
      /* 补全信息 */
      registLevelArr: ["专家", "普通"],
      departmentArr: ["内科", "外科"],
      doctorArr: ["A", "B"],
      rule: {},

      registration: {
        ptName: "",
        ptAddress: "",
        ptIdNumber: "",
        ptGender: "",
        ptBirthday: "",
        registDate: "",
        registLevel: "",
        department: "",
        doctor: "",
        needBook: ""
      },
      resultInfo: [
        {
          id: "",
          totalCost: "",
          invoiceNumber: "",
          nextPatientId: ""
        }
      ]
    };
  },
  methods: {
    addButtonClicked(formName) {
      this.$refs[formName].resetFields();
      // 清空
      /* 补全信息 */
      this.id = "".this.registration.ptName = "";
      this.registration.ptAddress = "";
      this.registration.ptIdNumber = "";
      this.registration.ptGender = "";
      this.registration.ptBirthday = "";
      this.registration.registDate = "";
      this.registration.registLevel = "";
      this.registration.department = "";
      this.registration.doctor = "";
      this.registration.needBook = "";
      this.updateFlag = false;
      this.addDialogVisible = true;
      this.loadPageData();
    },
    loadData() {
      // 这个函数会更新总个数和数组中的信息
      // 查询条件
      console.log("send getData: ");
      getData().then(response => {
        if (response.data.code == 0) {
          this.registLevelArr = response.data.data.registLevelArr;
          this.departmentArr = response.data.data.departmentArr;
          this.doctorArr = response.data.data.doctorArr;
        } else {
          console.log("getPage ERROR!!");
        }
      });
    },
    saveClick(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        }
        else{
          this.save();
        }
      });
    },
    save() {
      this.resultInfo.length = 0;
      console.log("click save");

      console.log("send insert:", this.registration);
      insert(this.registration).then(response => {
        if (response.data.code == 0) {
          this.$message("挂号成功");
          let tmp = {
            name: this.registration.ptName,
            idNUmber: this.registration.ptIdNumber,
            dept: this.registration.department,
            level: this.registration.registLevel,
            patientId: response.data.data.patientId,
            totalCost: response.data.data.totalCost,
            invoiceNumber: response.data.data.invoiceNumber
          };
          this.resultInfo.push(tmp);
          this.dialogVisible = true;
        } else {
          this.$message(response.data.msg + "挂号失败！");
        }
      });
    },
    selectDept() {
      this.registration.doctor = "";
      let tmp = {
        dept: this.registration.department
      };
      console.log(tmp);
      getDoctor(tmp).then(response => {
        this.doctorArr = response.data.data.doctorArr;
      });
    },
    success() {
      this.dialogVisible = false;
      this.$message("挂号成功");
    },
    cancel() {
      this.dialogVisible = false;
    },
    selectPay() {
      let tmp = {
        id: this.resultInfo[0].id
      };
      pay(tmp).then(response => {
        if (response.data.code == 0) {
          this.$message("缴费成功！");
          this.success();
        } else {
          this.$message("缴费失败！");
          this.dialogVisible = false;
        }
      });
    }
  }
};
</script>

<style>
.center {
  text-align: center;
}
</style>